<template>
  <div class="consultation-record">
    <!-- 标题栏 -->
    <div class="header">
      <el-button type="text" @click="goBack" class="back-button">
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
      <div class="header-content">
        <h2>咨询过程管理 / <span class="student-name">{{ studentName }}</span> 的咨询记录</h2>
        <div class="consultation-id">咨询编号: #{{ consultationId }}</div>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <div class="basic-info">
        <div class="photo-container">
          <el-avatar :size="100" :src="studentPhoto" class="student-photo" />
          <div class="student-status" :class="getStatusClass()">
            {{ getStatusText() }}
          </div>
        </div>
        <div class="consultation-info">
          <div class="info-group">
            <div class="info-title">
              <span class="icon">👤</span>
              <h3>基本信息</h3>
            </div>
            <el-descriptions :column="1" size="small">
              <el-descriptions-item label="姓名">{{ studentName }}</el-descriptions-item>
              <el-descriptions-item label="学院">{{ college }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ gender }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="info-group">
            <div class="info-title">
              <span class="icon">📚</span>
              <h3>学籍信息</h3>
            </div>
            <el-descriptions :column="1" size="small">
              <el-descriptions-item label="学号">{{ studentId }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ phone }}</el-descriptions-item>
              <el-descriptions-item label="年级">{{ grade }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="info-group">
            <div class="info-title">
              <span class="icon">🎓</span>
              <h3>教育信息</h3>
            </div>
            <el-descriptions :column="1" size="small">
              <el-descriptions-item label="学历">{{ education }}</el-descriptions-item>
              <el-descriptions-item label="班级">{{ className }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{ major }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>

      <el-divider />

      <div class="consultation-details">
        <div class="detail-group">
          <div class="info-title">
            <span class="icon">🏫</span>
            <h3>咨询信息</h3>
          </div>
          <el-descriptions :column="2" size="small">
            <el-descriptions-item label="咨询校区">{{ campus }}</el-descriptions-item>
            <el-descriptions-item label="预约渠道">{{ reserveChannel }}</el-descriptions-item>
            <el-descriptions-item label="预约时间">{{ reserveTime }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-group">
          <div class="info-title">
            <span class="icon">📊</span>
            <h3>心理测评</h3>
          </div>
          <div class="scale-results">
            <el-tag type="info" size="small">{{ scale1 }}</el-tag>
            <el-tag type="info" size="small">{{ scale2 }}</el-tag>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 记录时间线 -->
    <el-card class="record-timeline" shadow="hover">
      <div class="timeline-header">
        <h3>咨询记录时间线</h3>
        <div class="timeline-controls">
          <div class="timeline-filters">
            <el-button
              v-for="filter in filters"
              :key="filter.value"
              :class="['filter-btn', { active: currentFilter === filter.value }]"
              @click="filterRecords(filter.value)"
            >
              {{ filter.label }}
            </el-button>
          </div>

          <div class="search-export">
            <el-input
              v-model="searchKey"
              placeholder="请输入记录关键词查询"
              class="search-input"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
            <el-button class="export-btn" @click="exportData">
              <i class="el-icon-download"></i> 导出数据
            </el-button>
          </div>
        </div>
      </div>

      <div class="timeline-content">
        <el-empty v-if="filteredRecords.length === 0" description="没有找到匹配的记录" />

        <el-timeline v-else>
          <el-timeline-item
            v-for="(record, index) in filteredRecords"
            :key="index"
            :timestamp="`记录于 ${record.recordTime}`"
            placement="top"
            :type="getTimelineType(record.type)"
            :color="getTimelineColor(record.type)"
          >
            <el-card shadow="hover" :body-style="{ padding: '15px' }">
              <div class="record-header">
                <span class="operator">记录人: {{ record.operatorName }}</span>
                <el-tag size="small" :type="getPriorityTagType(record.priority)">
                  {{ record.priority }}
                </el-tag>
              </div>

              <div class="record-details">
                <div class="detail-item">
                  <span class="detail-label">咨询师:</span>
                  <span class="detail-value">{{ record.counselorName }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">时间段:</span>
                  <span class="detail-value">{{ record.timePeriod }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">地点:</span>
                  <span class="detail-value">{{ record.location }}</span>
                </div>
                <div v-if="record.type === 'consult'" class="detail-item">
                  <span class="detail-label">咨询类型:</span>
                  <span class="detail-value">{{ record.consultType }}</span>
                </div>
                <div v-if="record.type === 'visit'" class="detail-item">
                  <span class="detail-label">到访状态:</span>
                  <el-tag :type="getVisitStatusTagType(record.visitStatus)" size="small">
                    {{ getVisitStatusText(record.visitStatus) }}
                  </el-tag>
                </div>
              </div>

              <div v-if="record.type === 'visit'" class="timeline-actions">
                <el-button-group>
                  <el-button
                    size="small"
                    :type="visitStatus === 'normal' && currentRecordIndex === index ? 'primary' : ''"
                    @click="openVisitDialog('normal', index)"
                  >
                    正常到访
                  </el-button>
                  <el-button
                    size="small"
                    :type="visitStatus === 'late' && currentRecordIndex === index ? 'warning' : ''"
                    @click="openVisitDialog('late', index)"
                  >
                    迟到
                  </el-button>
                  <el-button
                    size="small"
                    :type="visitStatus === 'leave' && currentRecordIndex === index ? 'info' : ''"
                    @click="openVisitDialog('leave', index)"
                  >
                    请假
                  </el-button>
                  <el-button
                    size="small"
                    :type="visitStatus === 'dropout' && currentRecordIndex === index ? 'danger' : ''"
                    @click="selectVisitStatus('dropout', index)"
                  >
                    脱落
                  </el-button>
                </el-button-group>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

    <!-- 咨询结果弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="咨询结果"
      width="500px"
      :before-close="handleDialogClose"
      custom-class="consult-result-dialog"
    >
      <el-form ref="formRef" :model="dialogForm" label-position="top" :rules="rules">
        <el-form-item label="咨询结果" prop="consultResult">
          <el-radio-group v-model="dialogForm.consultResult">
            <el-radio-button label="end">结案</el-radio-button>
            <el-radio-button label="renew">续约</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <template v-if="dialogForm.consultResult === 'renew'">
          <el-form-item label="可预约咨询师" prop="counselor">
            <el-select
              v-model="dialogForm.counselor"
              placeholder="请选择咨询师"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="counselor in counselors"
                :key="counselor.name"
                :label="`${counselor.name} (${counselor.phone})`"
                :value="counselor.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="可咨询时间段" prop="timeSlot">
            <el-date-picker
              v-model="dialogForm.timeSlot"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 100%"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="submitDialog">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 脱落提示 -->
    <el-dialog
      v-model="showDropoutNotice"
      title="咨询流程结束"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dropout-notice">
        <el-result icon="warning" title="学生已脱落">
          <template #extra>
            <p class="notice-text">表示咨询流程已结束，将不再安排后续咨询。</p>
            <el-button type="primary" @click="submitRecord">确认</el-button>
          </template>
        </el-result>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElDialog } from 'element-plus';
import faker from 'faker';

const route = useRoute();
const router = useRouter();

// 添加返回函数
const goBack = () => {
  router.go(-1);
};

// 过滤器选项
const filters = [
  { value: 'all', label: '所有记录' },
  { value: 'arrange', label: '安排记录' },
  { value: 'consult', label: '咨询记录' },
  { value: 'visit', label: '到访记录' }
];

// 日期选择器快捷选项
const pickerOptions = {
  shortcuts: [
    {
      text: '今天',
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setHours(23, 59, 59);
        picker.$emit('pick', [start, end]);
      }
    },
    {
      text: '明天',
      onClick(picker) {
        const start = new Date();
        start.setDate(start.getDate() + 1);
        start.setHours(8, 0, 0);
        const end = new Date();
        end.setDate(end.getDate() + 1);
        end.setHours(17, 0, 0);
        picker.$emit('pick', [start, end]);
      }
    },
    {
      text: '下周',
      onClick(picker) {
        const start = new Date();
        start.setDate(start.getDate() + 7);
        start.setHours(8, 0, 0);
        const end = new Date();
        end.setDate(end.getDate() + 7);
        end.setHours(17, 0, 0);
        picker.$emit('pick', [start, end]);
      }
    }
  ]
};

// 定义响应式数据
const studentData = ref<any>({});
const studentName = ref('');
const consultationId = ref('');
const submitTime = ref('');
const college = ref('');
const gender = ref('');
const studentId = ref('');
const phone = ref('');
const grade = ref('');
const education = ref('');
const className = ref('');
const major = ref('');
const campus = ref('');
const reserveChannel = ref('');
const reserveTime = ref('');
const scale1 = ref('');
const scale2 = ref('');
const studentPhoto = ref('https://picsum.photos/100/100');

// 随机生成记录数据
const generateRandomRecords = () => {
  const records = [];
  const priorities = ['立即评估', '紧急', '普通', '轻微'];
  const counselors = ['小麦', '西西', '马克', '冉冰'];
  const locations = ['南湖校区立德楼(大创1号楼)二楼203', '东院心理咨询中心301', '西院心理辅导室402', '主校区5号楼105'];
  const consultTypes = ['个体咨询', '团体咨询', '心理测评', '危机干预'];
  const visitStatuses = ['normal', 'late', 'leave', 'dropout'];

  // 生成10条随机记录
  for (let i = 0; i < 10; i++) {
    const randomDate = new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1, Math.floor(Math.random() * 24), Math.floor(Math.random() * 60));
    const type = i % 4 === 0 ? 'arrange' : i % 4 === 1 ? 'consult' : 'visit';

    const record = {
      id: i + 1,
      recordTime: randomDate.toLocaleString(),
      operatorName: ['助理姓名：亿女', '助理姓名：诸葛', '助理姓名：小兰'][Math.floor(Math.random() * 3)],
      priority: priorities[Math.floor(Math.random() * priorities.length)],
      counselorName: counselors[Math.floor(Math.random() * counselors.length)],
      timePeriod: `${randomDate.getFullYear()}年${randomDate.getMonth() + 1}月${randomDate.getDate()}日 ${Math.floor(Math.random() * 12) + 8}:00-${Math.floor(Math.random() * 12) + 8}:30`,
      location: locations[Math.floor(Math.random() * locations.length)],
      type: type,
      consultType: type === 'consult' ? consultTypes[Math.floor(Math.random() * consultTypes.length)] : '',
      visitStatus: type === 'visit' ? visitStatuses[Math.floor(Math.random() * visitStatuses.length)] : '',
    };

    records.push(record);
  }

  return records;
};

// 时间线数据
const allRecords = generateRandomRecords();
const searchKey = ref('');
const currentFilter = ref('all');
const filteredRecords = computed(() => {
  let records = allRecords;

  // 按类型过滤
  if (currentFilter.value !== 'all') {
    records = records.filter(record => record.type === currentFilter.value);
  }

  // 按关键词搜索
  if (searchKey.value.trim() !== '') {
    const keyword = searchKey.value.toLowerCase();
    records = records.filter(record =>
      record.counselorName.toLowerCase().includes(keyword) ||
      record.location.toLowerCase().includes(keyword) ||
      record.priority.toLowerCase().includes(keyword) ||
      (record.type === 'consult' && record.consultType.toLowerCase().includes(keyword)) ||
      (record.type === 'visit' && getVisitStatusText(record.visitStatus).toLowerCase().includes(keyword))
    );
  }

  return records;
});

// 获取到访状态文本
const getVisitStatusText = (status: string) => {
  const statusMap = {
    'normal': '正常到访',
    'late': '迟到',
    'leave': '请假',
    'dropout': '脱落'
  };
  return statusMap[status] || '';
};

// 获取到访状态标签类型
const getVisitStatusTagType = (status: string) => {
  const statusMap = {
    'normal': 'success',
    'late': 'warning',
    'leave': 'info',
    'dropout': 'danger'
  };
  return statusMap[status] || '';
};

// 获取优先级标签类型
const getPriorityTagType = (priority: string) => {
  const priorityMap = {
    '立即评估': 'danger',
    '紧急': 'warning',
    '普通': 'primary',
    '轻微': 'info'
  };
  return priorityMap[priority] || '';
};

// 获取时间线类型
const getTimelineType = (type: string) => {
  const typeMap = {
    'arrange': 'primary',
    'consult': 'success',
    'visit': 'warning'
  };
  return typeMap[type] || '';
};

// 获取时间线颜色
const getTimelineColor = (type: string) => {
  const colorMap = {
    'arrange': '#409EFF',
    'consult': '#67C23A',
    'visit': '#E6A23C'
  };
  return colorMap[type] || '';
};

// 获取学生状态文本
const getStatusText = () => {
  const lastRecord = allRecords[allRecords.length - 1];
  if (lastRecord.type === 'visit' && lastRecord.visitStatus === 'dropout') {
    return '已结束';
  }
  return '进行中';
};

// 获取学生状态类名
const getStatusClass = () => {
  const lastRecord = allRecords[allRecords.length - 1];
  if (lastRecord.type === 'visit' && lastRecord.visitStatus === 'dropout') {
    return 'status-ended';
  }
  return 'status-ongoing';
};

// 咨询结果表单数据
const visitStatus = ref('');
const consultResult = ref('');
const selectedCounselor = ref('');
const timeSlotText = ref('周一 2023年07月03日 8:30-11:30');
const currentRecordIndex = ref(-1);
const showDropoutNotice = ref(false);

// 弹窗相关数据
const dialogVisible = ref(false);
const dialogForm = ref({
  consultResult: '',
  counselor: '',
  timeSlot: []
});

// 表单引用
const formRef = ref(null);

// 咨询师列表
const counselors = [
  { name: '小麦', phone: '15888888888' },
  { name: '西西', phone: '15888888889' },
  { name: '马克', phone: '15888888890' },
  { name: '冉冰', phone: '15888888891' }
];

// 表单校验规则
const rules = {
  consultResult: [
    { required: true, message: '请选择咨询结果', trigger: 'change' }
  ],
  counselor: [
    { required: true, message: '请选择咨询师', trigger: 'change' }
  ],
  timeSlot: [
    { required: true, message: '请选择可咨询时间段', trigger: 'change' }
  ]
};

// 打开到访情况弹窗
const openVisitDialog = (status: string, index: number) => {
  currentRecordIndex.value = index;
  visitStatus.value = status;
  dialogForm.value.consultResult = '';
  dialogForm.value.counselor = '';
  dialogForm.value.timeSlot = [];
  dialogVisible.value = true;
};

// 选择到访状态（脱落直接处理）
const selectVisitStatus = (status: string, index: number) => {
  currentRecordIndex.value = index;
  visitStatus.value = status;
  if (status === 'dropout') {
    consultResult.value = 'end';
    showDropoutNotice.value = true;
  }
};

// 关闭弹窗
const handleDialogClose = () => {
  dialogVisible.value = false;
  currentRecordIndex.value = -1;
};

// 提交弹窗表单
const submitDialog = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      // 保存表单数据
      consultResult.value = dialogForm.value.consultResult;
      if (dialogForm.value.counselor) {
        selectedCounselor.value = dialogForm.value.counselor;
      }

      // 更新记录状态
      if (currentRecordIndex.value !== -1 && filteredRecords.value[currentRecordIndex.value].type === 'visit') {
        filteredRecords.value[currentRecordIndex.value].visitStatus = visitStatus.value;
      }

      dialogVisible.value = false;
      currentRecordIndex.value = -1;
      ElMessage.success('操作成功');
    } else {
      ElMessage.warning('请完成表单必填项');
    }
  });
};

// 搜索记录
const handleSearch = () => {
  if (filteredRecords.value.length === 0) {
    ElMessage.info('没有找到匹配的记录');
  }
};

// 过滤记录
const filterRecords = (type: string) => {
  currentFilter.value = type;
};

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出成功');
};

// 提交记录
const submitRecord = () => {
  if (visitStatus.value === 'dropout') {
    if (currentRecordIndex.value !== -1 && filteredRecords.value[currentRecordIndex.value].type === 'visit') {
      filteredRecords.value[currentRecordIndex.value].visitStatus = 'dropout';
    }
    ElMessage.success('已记录为脱落，咨询流程结束');
  } else {
    ElMessage.warning('请先选择到访状态');
  }

  visitStatus.value = '';
  currentRecordIndex.value = -1;
  showDropoutNotice.value = false;
};

// 生成随机学生数据
const generateRandomStudentData = () => {
  return {
    studentName: faker.name.findName(),
    consultationId: `C${Math.floor(Math.random() * 10000)}`,
    college: faker.company.companyName(),
    gender: ['男', '女'][Math.floor(Math.random() * 2)],
    studentId: `S${Math.floor(Math.random() * 10000)}`,
    phone: faker.phone.phoneNumber(),
    grade: ['大一', '大二', '大三', '大四'][Math.floor(Math.random() * 4)],
    education: ['本科', '专科'][Math.floor(Math.random() * 2)],
    className: `Class-${Math.floor(Math.random() * 100)}`,
    major: faker.name.jobTitle(),
    campus: ['南湖校区', '东院', '西院', '主校区'][Math.floor(Math.random() * 4)],
    reserveChannel: ['线上预约', '线下预约'][Math.floor(Math.random() * 2)],
    reserveTime: new Date().toLocaleString(),
    scale1: `SCL-90: ${Math.floor(Math.random() * 41) + 60}分`,
    scale2: `SDS: ${Math.floor(Math.random() * 41) + 60}分`
  };
};

// 生命周期钩子：组件挂载后初始化数据
onMounted(() => {
  try {
    // 检查并解析路由参数中的学生数据
    if (route.query.studentData) {
      studentData.value = JSON.parse(route.query.studentData as string);

      // 更新所有数据，没有传递的数据使用随机数据填充
      studentName.value = studentData.value.studentName || generateRandomStudentData().studentName;
      consultationId.value = studentData.value.consultationId || generateRandomStudentData().consultationId;
      submitTime.value = studentData.value.submitTime || generateRandomStudentData().submitTime;
      college.value = studentData.value.college || generateRandomStudentData().college;
      gender.value = studentData.value.gender || generateRandomStudentData().gender;
      studentId.value = studentData.value.studentId || generateRandomStudentData().studentId;
      phone.value = studentData.value.phone || generateRandomStudentData().phone;
      grade.value = studentData.value.grade || generateRandomStudentData().grade;
      education.value = studentData.value.education || generateRandomStudentData().education;
      className.value = studentData.value.className || generateRandomStudentData().className;
      major.value = studentData.value.major || generateRandomStudentData().major;
      campus.value = studentData.value.campus || generateRandomStudentData().campus;
      reserveChannel.value = studentData.value.reserveChannel || generateRandomStudentData().reserveChannel;
      reserveTime.value = studentData.value.reserveTime || generateRandomStudentData().reserveTime;
      scale1.value = studentData.value.scale1 || generateRandomStudentData().scale1;
      scale2.value = studentData.value.scale2 || generateRandomStudentData().scale2;
    } else {
      const randomData = generateRandomStudentData();
      studentName.value = randomData.studentName;
      consultationId.value = randomData.consultationId;
      submitTime.value = randomData.submitTime;
      college.value = randomData.college;
      gender.value = randomData.gender;
      studentId.value = randomData.studentId;
      phone.value = randomData.phone;
      grade.value = randomData.grade;
      education.value = randomData.education;
      className.value = randomData.className;
      major.value = randomData.major;
      campus.value = randomData.campus;
      reserveChannel.value = randomData.reserveChannel;
      reserveTime.value = randomData.reserveTime;
      scale1.value = randomData.scale1;
      scale2.value = randomData.scale2;

      ElMessage.warning('未接收到学生数据，使用随机数据填充');
    }
  } catch (error) {
    ElMessage.error('数据解析失败');
    console.error('解析学生数据时出错:', error);
  }
});
</script>

<style scoped lang="scss">
.consultation-record {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: black;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.2);

    .back-button {
      color: light blue;
      font-size: 16px;
      margin-right: 20px;
      padding: 8px 12px;
      transition: all 0.3s;

      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
      }
    }

    .header-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;

        .student-name {
          font-weight: 700;
        }
      }

      .consultation-id {
        font-size: 18px;
        font-weight: 600;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 5px 10px;
        border-radius: 4px;
      }
    }
  }

  .info-card {
    margin-bottom: 20px;
    border-radius: 8px;
    border: none;

    .basic-info {
      display: flex;
      margin-bottom: 15px;

      .photo-container {
        position: relative;
        margin-right: 30px;

        .student-photo {
          border: 3px solid #f5f7fa;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .student-status {
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          padding: 3px 15px;
          border-radius: 15px;
          font-size: 12px;
          font-weight: 500;
          color: white;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          &.status-ongoing {
            background-color: #67C23A;
          }

          &.status-ended {
            background-color: #F56C6C;
          }
        }
      }

      .consultation-info {
        flex: 1;
        display: flex;
        justify-content: space-between;

        .info-group {
          flex: 1;
          margin-right: 20px;

          &:last-child {
            margin-right: 0;
          }

          .info-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #ebeef5;

            .icon {
              font-size: 20px;
              margin-right: 10px;
            }

            h3 {
              margin: 0;
              font-size: 18px;
              color: #304156;
              font-weight: 500;
            }
          }
        }
      }
    }

    .consultation-details {
      display: flex;

      .detail-group {
        flex: 1;
        margin-right: 30px;

        &:last-child {
          margin-right: 0;
        }

        .info-title {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px dashed #ebeef5;

          .icon {
            font-size: 20px;
            margin-right: 10px;
          }

          h3 {
            margin: 0;
            font-size: 18px;
            color: #304156;
            font-weight: 500;
          }
        }

        .scale-results {
          display: flex;
          gap: 10px;
        }
      }
    }
  }

  .record-timeline {
    border-radius: 15px;
    border: none;

    .timeline-header {
      margin-bottom: 20px;

      h3 {
        margin: 0 0 15px 0;
        font-size: 18px;
        color: #303133;
        font-weight: 500;
      }

      .timeline-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .timeline-filters {
          display: flex;
          gap: 10px;

          .filter-btn {
            padding: 8px 15px;
            border-radius: 4px;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            cursor: pointer;
            transition: all 0.3s;

            &.active {
              background-color: #409EFF;
              border-color: #409EFF;
              color: white;
            }
          }
        }

        .search-export {
          display: flex;
          align-items: center;
          gap: 10px;

          .search-input {
            width: 250px;
          }

          .export-btn {
            padding: 15px 15px;
            background-color: #67C23A;
            color: white;
            border: none;

            &:hover {
              background-color: #85ce61;
            }
          }
        }
      }
    }

    .timeline-content {
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .operator {
          font-size: 15px;
          color: #909399;
        }
      }

      .record-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 18px;

        .detail-item {
          display: flex;
          align-items: center;

          .detail-label {
            margin-right: 15px;
            color: #909399;
            font-size: 15px;
          }

          .detail-value {
            font-size: 15px;
            color: #606266;
          }
        }
      }

      .timeline-actions {
        margin-top: 18px;
      }
    }
  }

  .dropout-notice {
    text-align: center;

    .notice-text {
      margin: 18px 0;
      color: #606266;
    }
  }
}

// 自定义弹窗样式
.consult-result-dialog {
  .el-dialog__header {
    border-bottom: 10px solid #ebeef5;
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  .el-dialog__body {
    padding: 20px 25px;
  }

  .el-radio-group {
    width: 100%;

    .el-radio-button {
      flex: 1;

      :deep(.el-radio-button__inner) {
        width: 100%;
      }
    }
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>